<template>
  <h4>当前的sum={{sum}}</h4>
  <button @click="sum++">点我sum++</button>
  <hr>
  <h2>一个人的信息</h2>
  <h3>姓名：{{name}}</h3>
  <h3>年龄：{{age}}</h3>
  <h3>薪资：{{job.j1.salary}}k</h3>
  <h3 v-show="person.car">座驾信息：{{person.car}}</h3>
  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="job.j1.salary++">加薪</button>
  <button @click="showRawPerson">展示原始的person</button>
  <button @click="addCar">加一辆车</button>
  <button v-show="person.car" @click="person.car.name+='!'">改车名</button>
  <button v-show="person.car" @click="person.car.price++">改车价</button>
</template>

<script>
import { reactive, ref, toRefs, toRaw, markRaw} from 'vue';
export default {
  name: 'Demo', 
  setup() {
    let sum = ref(0)

    let person = reactive({
        name: '张三',
        age: 18,
        job: {
            j1: {
                salary: 20, 
            }
        }
    })

    function showRawPerson() {
      //toRaw表示将响应式数据转换为原始数据（非响应式数据）
      console.log(person, toRaw(person))

      //toRaw只能还原reactive定义的数据，以下不会输出sum的值
      // console.log(sum, toRaw(sum))
    }

    function addCar() {
      let car = {
        name: 'benz',
        price: 40,
      }
      //默认新增的属性是响应式数据
      // person.car = car
      //markRaw可标记一个对象数据，vue3永远不会对其进行响应式处理，可提升性能
      person.car = markRaw(car)
    }
    

    return {
      person,
      ...toRefs(person),
      sum,
      showRawPerson,
      addCar,
    }
  }
}
</script>

<style>
</style>